<template>
  <router-view />
</template>

<script setup>
import { watch, onMounted } from 'vue'
import { useStore } from 'vuex'

const store = useStore()

watch(
  () => store.getters.theme,
  () => {
    initTheme()
  }
)

function initTheme() {
  let theme = store.getters.theme
  if (theme === 'dark') {
    document.documentElement.setAttribute('class', 'dark')
  } else {
    document.documentElement.removeAttribute('class')
  }
}

onMounted(() => {
  initTheme()
})
</script>
